import { useEffect, useState } from 'react'
import { Table, Button, message, Space,  Tag, Rate, Popconfirm } from 'antd'

import styles from './style.module.scss'
import Link from 'next/link'
import { AdminService } from '../../services'
import { Remark } from '../../models/types'
import { nowDay } from '../../libs/utils'

const { Column } = Table

const pageSize = 10

export default function Reamrk() {

  const [remarks, setRemarks] = useState<Remark[]>([])
  const [total, setToal] = useState<number>(0)
  const [pageIndex, setPageIndex] = useState<number>(1)

  async function getdata(skip: number) {
    const res = await AdminService.remarklist(skip, pageSize)
    if (res.stat === 'OK') {
      setRemarks(res.data.list)
      setToal(res.data.total)
    } else {
      message.error(res.msg)
    }
  }

  useEffect(() => {
    getdata(0)
  }, [])

  return (
    <div className={styles.wrap}>
      <Table
        dataSource={remarks}
        rowKey="_id"
        pagination={{
          pageSize: pageSize,
          current: pageIndex,
          total: total,
          showSizeChanger: false,
          onChange: async (v) => {
            setPageIndex(v)
            getdata((v - 1) * 10)
          }
        }}
      >
        <Column title="评分" dataIndex="rate" key="_id"
          width={200}
          render={(rate: number) => <Rate disabled defaultValue={rate} />}
        />
        <Column title="内容" dataIndex="content" key="_id" />
        <Column title="状态" dataIndex="isDelete" key="_id"
          render={v => {
            return v ? <Tag color="warning">删除</Tag> : <Tag color='success'>正常</Tag>
          }}
        />
        <Column title="类型" dataIndex="rate" key="_id"
          render={v => {
            return v === 0 ? <Tag color='orange'>留言</Tag> : <Tag color='red'>评价</Tag>
          }}
        />
        <Column title="创建时间" dataIndex="createAt" key="_id"
          render={v => {
            return nowDay(v as number)
          }}
        />

        <Column
          title="操作"
          key="_id"
          render={(text, record: Remark) => {
            return (
              <Space>
                <Link href={'/goods/' + record.bookId} passHref>
                  <Button
                    size="small"
                    type="primary"
                  >
                    查看
                  </Button>
                </Link>
                <Popconfirm title={`确认${record.isDelete ? '恢复' : '删除'}吗？`} okText="确认" cancelText="取消"
                  onConfirm={async () => {
                    const res = await AdminService.dealremark(record._id, !record.isDelete)
                    if (res.stat === 'OK') {
                      message.success('处理成功')
                      getdata((pageIndex - 1) * 10)
                    } else {
                      message.error(res.msg)
                    }
                  }}
                >
                  <Button
                    size='small'
                    type='default'
                    danger={!record.isDelete}
                  >{record.isDelete ? '恢复' : '删除'}</Button>
                </Popconfirm>
              </Space>
            )
          }}
        />
      </Table>
    </div>
  )
}
